<!--
 * @Description: 卡片（区域，可含标题及tab栏）
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2023-03-30 12:27:41
 * @LastEditTime: 2023-03-31 09:54:01
-->
<template>
  <div class="data-view-card" :class="{ showTab }">
    <div v-if="showTitle && !showTab" class="card-title">{{ title }}</div>
    <div v-if="showTab" class="card-tab">
      <div class="tab-head">
        <div class="tab-label" v-for="item in tabList" :key="item.key" :class="{ active: item.key === activeKey }"
          @click="tabChange(item.key)">
          {{ item.label }}
        </div>
      </div>
      <div class="tab-content" v-for="item in tabList" :key="item.key" v-show="item.key === activeKey">
        <slot :name="item.key" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Card',
}
</script>
<script lang="ts" setup>
import { ref, PropType } from 'vue'
import "./style.scss";

const props = defineProps({
  width: {
    type: String,
    default: '300px',
  },
  height: {
    type: String,
    default: '200px',
  },
  showTitle: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: '示例标题',
  },
  titleAlign: {
    type: String,
    default: 'left',
  },
  showTab: {
    type: Boolean,
    default: false,
  },
  tabList: {
    type: Array as PropType<{
      label: string;
      key: string;
      active?: boolean;
    }[]>,
    default: () => [
      {
        label: '标签1',
        key: 'tab1',
      },
      {
        label: '标签2',
        key: 'tab2'
      },
    ]
  },
})

const activeKey = ref(props.tabList[0]?.key)

const $emit = defineEmits(['change'])

const tabChange = (key: string) => {
  activeKey.value = key
  $emit('change', key)
}
</script>
 
<style scoped lang="scss">
.data-view-card {
  width: v-bind(width);
  height: v-bind(height);

  .card-title {
    text-align: v-bind(titleAlign);
  }
}
</style>